const path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
let MiniCssExtractPlugin = require('mini-css-extract-plugin');
let webpack = require('webpack');
let pageArray = ['index', 'login'];//存储所有要打包的HTML页面名称
let HTMLPluginObj = pageArray.map(p => {
    return HTMLPlugin(p);
});
function HTMLPlugin(fileName) {
    return new HtmlWebpackPlugin({
        template: `./src/html/${fileName}.html`,//指明打包的HTML文件路径，参照根目录查找打包资源
        filename: `./html/${fileName}.html`,//指定打包后资源的存储路径以及名称，参照dist目录查找
        chunks: [`${fileName}`]//打包后的当前HTML页面引入的主JS文件(output中filename对应上)名
    })
}
function entryList() {
    let items = {};
    pageArray.forEach(pageName => {
        items[pageName] = `./src/js/main/${pageName}.js`;
    });
    return items;
}
module.exports = {
    mode: 'production',//打包模式: development:开发模型，production：生成模式
    entry: {//要打包的资源
        ...entryList()
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/[name].js'
    },
    plugins: [
        ...HTMLPluginObj,
        new MiniCssExtractPlugin({
            filename: './css/[name].css'//指定打包后资源的存储路径以及名称，参照dist目录查找
        }),
        new webpack.ProvidePlugin({ "$": "jquery" })
    ],
    module: {
        rules: [
            {
                test: /\.css$/i,//编写正则，确定要打包的资源，以.CSS结尾的资源要被打包
                // exclude:'',//exclude排除不打包的元素
                use: [MiniCssExtractPlugin.loader, 'css-loader']//以指定插件来打包
            },
            {
                test: /\.scss$/i,//编写正则，确定要打包的资源，以.scss结尾的资源要被打包
                // exclude:'',//exclude排除不打包的元素
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']//以指定插件来打包
            },
            {
                //要处理的图片类型
                test: /\.(png|jpg|jpeg|gif|webm)$/i,
                use: {
                    loader: 'url-loader',
                    options: {
                        limit: 1024 * 10,// 10kb一下的图片直接转为base-64格式字符串放在页面中，
                        outputPath: './image/',//打包后图片在dist目录下的路径
                        esModule: false// 用于解决兼容性问题
                    }
                }
            },
            //HTML中的图片配置
            {
                //在所有以.html为后缀的页面中处理引入的图片
                test: /\.html$/i,
                use: ['html-withimg-loader']
            }
        ]
    },
    devServer: {
        port: 8888,//服务器端口号
        open: true,//启动服务器时自动打开一个页面
        openPage: './html/login.html',//以dist为参照目录
        hot: true,//热部署:更新代码后自动重新打包
        proxy: {//配置代理服务器
            "/": {
                target: 'http://localhost:/1315'//配置后端服务器URL
            }
        }
    }
}